<template>
  <div class="bnh-userlist-container">
      <div class="bnh-user-headBox">
        <input type="text" placeholder="搜索用户">
        <div class="changeBox flex flex-align-center">
           <div class="bnh-change-item flex flex-align-center flex-pack-center active" v-if='isScreen'>
               <p>排序</p>
               <img src="@/assets/img/sanjia-active.png" alt="">
           </div>
           <div class="bnh-change-item flex flex-align-center flex-pack-center" v-else='isScreen' @click="onScreen">
               <p>排序</p>
               <img src="@/assets/img/sanjia.png" alt="">
           </div>
           <div class="bnh-change-item flex flex-align-center flex-pack-center active" v-if='isGrade'>
               <p>等级</p>
               <img src="@/assets/img/sanjia-active.png" alt="">
           </div>
            <div class="bnh-change-item flex flex-align-center flex-pack-center" v-else='isGrade' @click="onGrade">
               <p>等级</p>
               <img src="@/assets/img/sanjia.png" alt="">
           </div>
           <div class="bnh-change-item flex flex-align-center flex-pack-center active" v-if='isDate'>
               <p>时间</p>
               <img src="@/assets/img/sanjia-active.png" alt="">
           </div>
             <div class="bnh-change-item flex flex-align-center flex-pack-center " v-else='isDate' @click="onDate">
               <p>时间</p>
               <img src="@/assets/img/sanjia.png" alt="">
           </div>
           <div class="bnh-change-item flex flex-align-center active flex-pack-center" v-if='isConsume'>
               <p>消费额</p>
               <img src="@/assets/img/sanjia-active.png" alt="">
           </div>
           <div class="bnh-change-item flex flex-align-center flex-pack-center" v-else ='isConsume' @click="onConsume">
               <p>消费额</p>
               <img src="@/assets/img/sanjia.png" alt="">
           </div>
        </div><!-- 筛选框结束 -->
        <!-- 条件框 -->
      </div>
      <div style="height:2.14rem"></div>
      <!-- 列表 -->
      <div class="bnh-uesr-list">
            <div v-if='isListShow'>
                <NullTemp></NullTemp>
            </div>
            <div class="bnh-user-item flex flex-align-center" v-else='isListShow'>
                <img src="@/assets/img/user-heder.png" alt="">
                <div class="bnh-tips-box">
                    <p class="user-name">奋斗的青春</p>
                    <p class="user-date">注册时间：2018/04/13 16:30</p>
                </div>
                <div class="bnh-money-box">
                    <p class="cont">4499.00</p>
                    <p class="cont-tips">消费金额(元)</p>
                </div>
            </div>
      </div><!-- 列表结束 -->
      <NavBottom></NavBottom>
  </div>
</template>
<script>
import NavBottom from '../components/NavBottom'
import NullTemp from '../components/Null'
export default {
   created(){ //页面初始化时修改网页标题
			window.document.title = '用户';
            this.$store.state.Index = 2;
   },
  components:{
      NavBottom,
      NullTemp
  },
  data(){
      return{
          isGrade:false, //控制等级筛选
          isScreen:false, // 筛选
          isDate:false, //控制时间筛选
          isConsume:false, //控制消费额
          isListShow:true, //判断初次加载有无数据
      }
  },
  methods:{
     onScreen(){ //筛选
         this.isGrade = false;
         this.isScreen = true;
         this.isDate = false;
         this.isConsume = false;
     },
     onGrade(){ //按等级筛选
          this.isGrade = true;
         this.isScreen = false;
         this.isDate = false;
         this.isConsume = false;
     },
     onDate(){ //按时间筛选
           this.isGrade = false;
         this.isScreen = false;
         this.isDate = true;
         this.isConsume = false;
     },
     onConsume(){ //按消费额
         this.isGrade = false;
         this.isScreen = false;
         this.isDate = false;
         this.isConsume = true; 
     }
  }
}
</script>
<style scoped>
.bnh-userlist-container{background: #f5f5f5;position: absolute;height: 100%;width: 100%;top: 0;left: 0;}
.bnh-user-headBox{min-height: 2.14rem;background: #fff;position: fixed;width: 100%;top: 0;left: 0;z-index: 2}
.bnh-user-headBox input{height: 0.73rem;width: 6.34rem;background: #eeeeee;text-align: center;border:none;border-radius: 7px;margin-top: 0.4rem;margin-left: 0.6rem;color: #858585;}
.changeBox{height: 0.74rem;margin-top: 0.2rem;padding-left: 0.12rem}
.bnh-change-item{height: 0.74rem;width: 1.8rem}
.bnh-change-item img{height: 0.13rem;width: auto;margin-bottom: -2px;margin-left: 5px}
.active{color: #ffaf3c}
.bnh-user-item{height: 1.8rem;background: #fff;margin-top: 0.18rem}
.bnh-user-item img{height: 1.14rem;width: auto;margin-left: 0.26rem}
.bnh-tips-box{height: 1.14rem;width: 3.3rem;margin-left: 0.3rem}
.user-name{font-size: 0.28rem;font-weight: 600;}
.user-date{font-size: 0.24rem;line-height: 0.3rem;color: #6c6c6c}
.bnh-money-box{height: 1.14rem;width: 1.8rem;margin-left: 0.5rem;text-align: center;color: #f17421}
.cont{font-size: 0.36rem}
.cont-tips{font-size: 0.24rem;line-height: 0.1rem;}
</style>


